import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import LinkedHeading from '../../components/LinkedHeading';
import ReactPlayground from '../../components/ReactPlayground';
import CardBasic from '../../examples/Card/Basic';
import CardBgColor from '../../examples/Card/BgColor';
import CardBodyOnly from '../../examples/Card/BodyOnly';
import CardBodyShorthand from '../../examples/Card/BodyShorthand';
import CardBorder from '../../examples/Card/Border';
import CardColumns from '../../examples/Card/Columns';
import CardDeck from '../../examples/Card/Deck';
import CardGroup from '../../examples/Card/Group';
import CardHeaderAndFooter from '../../examples/Card/HeaderAndFooter';
import CardImageAndText from '../../examples/Card/ImageAndText';
import CardImgOverlay from '../../examples/Card/ImgOverlay';
import CardKitchenSink from '../../examples/Card/KitchenSink';
import CardListGroups from '../../examples/Card/ListGroups';
import CardListGroupWithHeader from '../../examples/Card/ListGroupWithHeader';
import CardNavPills from '../../examples/Card/NavPills';
import CardNavTabs from '../../examples/Card/NavTabs';
import CardText from '../../examples/Card/Text';
import CardWithHeader from '../../examples/Card/WithHeader';
import CardWithHeaderAndQuote from '../../examples/Card/WithHeaderAndQuote';
import CardWithHeaderStyled from '../../examples/Card/WithHeaderStyled';

# Cards

<p className="lead">
  Bootstrap’s cards provide a flexible and extensible content container
  with multiple variants and options.
</p>

## Basic Example

<ReactPlayground codeText={CardBasic} />

## Content types

### Body

Use `<Card.Body>` to pad content inside a `<Card>`.

<ReactPlayground codeText={CardBodyOnly} />

Alternatively, you can use this shorthand version for Cards with body
only, and no other children

<ReactPlayground codeText={CardBodyShorthand} />

### Title, text, and links

Using `<Card.Title>`, `<Card.Subtitle>`, and
`<Card.Text>` inside the `<Card.Body>` will line them up nicely.
`<Card.Link>`s are used to line up links next to each other.

<ReactPlayground codeText={CardText} />

### List Groups

Create lists of content in a card with a flush list group.

<ReactPlayground codeText={CardListGroups} />
<ReactPlayground codeText={CardListGroupWithHeader} />

### Kitchen Sink

<ReactPlayground codeText={CardKitchenSink} />

### Header and Footer

You may add a header by adding a `<Card.Header>` component.

<ReactPlayground codeText={CardWithHeader} />

A `<CardHeader>` can be styled by passing a heading element
through the `<as>` prop

<ReactPlayground codeText={CardWithHeaderStyled} />
<ReactPlayground codeText={CardWithHeaderAndQuote} />
<ReactPlayground codeText={CardHeaderAndFooter} />

## Images

Cards include a few options for working with images. Choose from
appending “image caps” at either end of a card, overlaying images with
card content, or simply embedding the image in a card.

### Image caps

Similar to headers and footers, cards can include top and bottom “image
caps”—images at the top or bottom of a card.

<ReactPlayground codeText={CardImageAndText} />

### Image Overlays

Turn an image into a card background and overlay your card’s text.
Depending on the image, you may or may not need additional styles or
utilities.

<ReactPlayground codeText={CardImgOverlay} />

## Navigation

Add some navigation to a card’s header (or block) with React Bootstrap’s
[Nav](../navs) components.

<ReactPlayground codeText={CardNavTabs} />
<ReactPlayground codeText={CardNavPills} />

## Card Styles

### Background Color

You can change a card's appearance by changing their `<bg>`, and `<text>` props.

<ReactPlayground codeText={CardBgColor} />

### Border Color

<ReactPlayground codeText={CardBorder} />

## Card layout

### Card Groups

<ReactPlayground codeText={CardGroup} />

### Card Deck

<ReactPlayground codeText={CardDeck} />

### Card Columns

<ReactPlayground codeText={CardColumns} />

## API

<ComponentApi metadata={props.data.Card} />
<ComponentApi metadata={props.data.CardBody} exportedBy={props.data.Card} />
<ComponentApi metadata={props.data.CardImg} exportedBy={props.data.Card} />
<ComponentApi metadata={props.data.CardImgOverlay} exportedBy={props.data.Card} />

<ComponentApi metadata={props.data.CardDeck} />
<ComponentApi metadata={props.data.CardGroup} />


export const query = graphql`
  query CardQuery {
    Card: componentMetadata(displayName: { eq: "Card" }) {
      ...ComponentApi_metadata
    }
    CardBody: componentMetadata(displayName: { eq: "CardBody" }) {
      ...ComponentApi_metadata
    }
    CardImg: componentMetadata(displayName: { eq: "CardImg" }) {
      ...ComponentApi_metadata
    }
    CardImgOverlay: componentMetadata(displayName: { eq: "CardImgOverlay" }) {
      ...ComponentApi_metadata
    }
    CardDeck: componentMetadata(displayName: { eq: "CardDeck" }) {
      ...ComponentApi_metadata
    }
    CardGroup: componentMetadata(displayName: { eq: "CardGroup" }) {
      ...ComponentApi_metadata
    }
    CardColumns: componentMetadata(displayName: { eq: "CardColumns" }) {
      ...ComponentApi_metadata
    }
  }
`;
